<template>
	<view class="menu-box left clearfix">
		<view class="menu-breadcrumb left clearfix">
			<uni-breadcrumb separator="/" style="width:300px;float:left;">
			  <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
			    {{route.name}}
			  </uni-breadcrumb-item>
			</uni-breadcrumb>
			
		</view>
		
		<!--内容开始-->
		<view class="add-box left clearfix">
			
				<view class="example"> 
					<!-- 基础用法，不包含校验规则 -->
					<uni-forms ref="form" :modelValue="formData" label-width="50">
						<uni-forms-item label="类型" required name="type">
							<uni-data-select
							      v-model="formData.type"
							      :localdata="typeData"
							    ></uni-data-select>
						</uni-forms-item>
						
						<uni-forms-item label="项目" required name="title">
							<uni-easyinput v-model="formData.title" placeholder="如：豆腐20斤" />
						</uni-forms-item>
						
						<uni-forms-item label="金额" name="price">
							<uni-easyinput type="number" v-model="formData.price" placeholder="如5，代码5元" />
						</uni-forms-item>
						
						
						<uni-forms-item label="凭证" name="images">
							
										<view class="example-body">
											<uni-file-picker limit="9" @success="uploadImageSuccess" title="最多选择9张图片"></uni-file-picker>
										</view>
						
						</uni-forms-item>
						
						<uni-forms-item label="备注" name="content">
							<textarea placeholder="备注内容" style="border:1px solid #eee;padding:10px;width:100%;" v-model="formData.content"></textarea>
						</uni-forms-item>
						
						<uni-forms-item label="" style="margin-top:50px;text-align: center;">
							
							<view class="form-quxiao-submit right" @click="navigatorToList()">
								取消
							</view>
							
							<view class="form-submit right" @click="submitForm">
								保存
							</view>
							
						</uni-forms-item>
						
					</uni-forms>
				</view>
		</view>
		<!--内容结束-->
		
	</view>
</template>
<style scoped>
	.role-item-title{width:100%;line-height:20px;margin-top:15px;margin-bottom:15px;}
	.role-item{width:100%;min-height:70px;}
	.role-box label{margin-left:10px;margin-right:10px;}
	.role-box{width:100%;min-height:200px;}
	.add-null-image-box{width:100%;height:300px;line-height:300px;text-align: center;font-size:14px;color:#999;}
	.add-image-box{width:230px;height:150px;border:1px solid #eee;border-radius: 5px;margin:4px;cursor:pointer;overflow: hidden;}
	.add-select-content{width:96%;margin-left:2%;margin-top:20px;height:420px;overflow: auto;}
	.add-select-title label{float:right;margin-right:10px;cursor:pointer;}
	.add-select-title{width:calc(100% - 10px);padding-left:10px;line-height:35px;font-size:13px;color:#555;}
	.add-select-box{width:1000px;height:500px;background:#fff;border-radius: 10px;}
	.poster-box{width:300px;height:200px;border:1px solid #eee;border-radius: 5px;background:#f8f8f8;line-height:180px;text-align: center;}
	.form-quxiao-submit{width:100px;line-height:40px;height:40px;color:#666;border-radius: 5px;text-align: center;border:1px solid #ccc;margin-right:20px;cursor:pointer;}
	.form-submit{width:100px;line-height:40px;height:40px;background:#2979ff;color:#fff;border-radius: 5px;text-align: center;margin-right:20px;cursor:pointer;}
	.example {
			padding: 15px;
			background-color: #fff;
		}
	
		.segmented-control {
			margin-bottom: 15px;
		}
	
		.button-group {
			margin-top: 15px;
			display: flex;
			justify-content: space-around;
		}
	
		.form-item {
			display: flex;
			align-items: center;
		}
	
		.button {
			display: flex;
			align-items: center;
			height: 35px;
			margin-left: 10px;
		}
	.add-box{width:60%;margin-left:2%;margin-top:30px;min-height:400px;}
</style>

<script>
	var db = uniCloud.database();
	var systemMenu = uniCloud.importObject('systemmenu',{customUI:true});
	var aliyun = uniCloud.importObject('aliyun',{customUI:true});
	import common from '/static/js/common.js';
	export default {
		name:"news-add",
		data() {
			return {
				typeData:[],
				typeValue:'',
				formData:{
					title:'',
					price:'',
					images:[],
					content:'',
					userinfo:{},
					type:''
				},
				routes: [
				        {
				          to: "/A",
				          name: "餐厅管理",
				        },
				        {
				          to: "/B",
				          name: "采购单录入",
				        },
				      ]
			};
		},
		props:{
			id:{
				type:String
			},
			userinfo:{
				type:Object,
				title:'用户信息'
			}
		},
		mounted() {
				var that = this;
				that.getType();
				
			},
		methods:{
			//获取采购单类型
			getType(){
				db.collection('purchase_type').where({type:'dining'}).field('_id as value,title as text').get().then(res=>{
					this.typeData = res.result.data;
				});
			},
			//上传凭证成功以后
			uploadImageSuccess(e){
				this.formData.images.push(e.tempFilePaths);
			},
			//跳转列表页
			navigatorToList(){
				uni.navigateTo({
					url:'/pages/index/index?page=userinfo-role-group'
				})
			},
			
			//提交订单
			submitForm(form){
				var that = this;
				//验证码
				var formData = this.formData;
				if(!formData.type){
					uni.showToast({
						title:'请选择消费类型',
						icon:'none'
					})
					return false;
				}
				if(!formData.title){
					uni.showToast({
						title:'请输入消费项目',
						icon:'none'
					})
					return false;
				}
				if(!formData.price){
					uni.showToast({
						title:'请输入消费金额',
						icon:'none'
					})
					return false;
				}
				this.$refs.form.validate().then(res=>{
					res.price = this.formData.price * 100;
					res.userinfo = {
						name:this.userinfo.name,
						_id:this.userinfo._id
					}
					uni.showLoading({
						title:'添加中'
					})
					
					db.collection('purchase').add(res).then(res=>{
						uni.hideLoading();
						uni.showToast({
							title:'添加成功'
						})
						setTimeout(function(){
							that.formData = {
								title:'',
								price:'',
								images:[],
								content:'',
								userinfo:{},
								type:''
							}
						},2000);
					});
					
				});
			}
		}
	}
</script>

